<template>
  <div class="px-20 py-5" id="div-1">
    <a-divider class="h-1 !mb-0 bg-[#000155] !mt-0" id="a-divider-1" />

    <a-flex vertical justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-19">
      <a-typography-link id="a-typography-link-20">
        <a-typography-text class="text-[16px] font-bold" id="a-typography-text-31"> 大宗商品价格 </a-typography-text>
      </a-typography-link>
    </a-flex>

    <a-flex class="my-2" justify="space-between" id="a-flex-20">
      <a-tag flex="1 1 auto" class="mr-2" color="default" v-for="(item, index) in list8" :key="index" :id="`a-tag-2-${index}`">{{
        item
      }}</a-tag>
    </a-flex>

    <a-row :gutter="10" class="mt-3" id="a-row-4">
      <a-col :span="8" id="a-col-9">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-21">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-6">大宗商品价格数据</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-21">更多>></a-typography-link>
        </a-flex>
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-22">
          <a-flex align="center" class="p-2 border-[0] border-b-[1px] border-solid border-[#ddd]" id="a-flex-23">
            <a-typography-link class="text-[12px] pr-3" id="a-typography-link-22">市场价格</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-23">出厂价格</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-24">国际价格</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940]" id="a-typography-link-25">期货价格</a-typography-link>
          </a-flex>
          <a-image width="100%" class="p-2 !h-[300px]" src="https://picsum.photos/id/5/1000/300" :preview="false" id="a-image-5" />
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-10">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-24">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-7">大宗商品供需数据</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-26">更多>></a-typography-link>
        </a-flex>
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-25">
          <a-flex align="center" class="p-2 border-[0] border-b-[1px] border-solid border-[#ddd]" id="a-flex-26">
            <a-typography-link class="text-[12px] pr-3" id="a-typography-title-7">产能</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-27">产量</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-28">开工率</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-29">消费</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-30">库存</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-31">进出口</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940]" id="a-typography-link-32">毛利润</a-typography-link>
          </a-flex>
          <a-image width="100%" class="p-2 !h-[300px]" src="https://picsum.photos/id/6/1000/300" :preview="false" id="a-image-6" />
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-11">
        <a-typography-title :level="5" class="p-2 pl-0 line-clamp-1 !mb-0" id="a-typography-title-8">大宗商品价格数据库</a-typography-title>
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-27">
          <a-flex align="center" wrap="wrap" gap="20" class="p-4" id="a-flex-28">
            <a-typography-link
              v-for="(item, index) in list9"
              :key="index"
              class="!text-[#4E4940] bg-[#F8F8F8] px-8 py-2 border-[1px] border-solid border-[#ddd]"
              :id="`a-typography-link-33-${index}`"
              >{{ item }}</a-typography-link
            >
          </a-flex>
          <a-flex justify="space-between" align="center" class="bg-[#F8F8F8] p-2" id="a-flex-29">
            <a-typography-link class="line-clamp-1" id="a-typography-link-34">
              更多数据欢迎试用 百川盈学行业大数据智能分析系线
            </a-typography-link>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="`a-typography-link-35-${index}`">更多>></a-typography-link>
          </a-flex>
        </a-flex>
        <a-image width="100%" class="pt-5 !h-[165px]" src="https://picsum.photos/id/7/1000/165" :preview="false" id="a-image-7" />
      </a-col>
    </a-row>

    <a-row :gutter="10" class="mt-3" id="a-row-5">
      <a-col :span="8" id="a-col-12">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-30">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-9">宏观经济</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-36">更多>></a-typography-link>
        </a-flex>
        <a-typography-paragraph class="!mb-0 pb-11 border border-[#ddd] border-solid" id="a-typography-paragraph-10">
          <a-flex
            justify="space-between"
            align="center"
            class="p-2"
            :class="{ 'bg-[#F8F8F8]': index % 2 !== 0 }"
            v-for="(item, index) in list10"
            :key="index"
            :id="`a-flex-31-${index}`"
          >
            <a-typography-link class="text-[12px]" :id="`a-typography-link-37-${index}`">
              <a-typography-text :class="{ 'text-[red]': index === 4 }" class="line-clamp-1" :id="`a-typography-text-32-${index}`">{{
                item.name
              }}</a-typography-text>
            </a-typography-link>
            <a-typography-text class="text-[12px] text-[#979496] line-clamp-1" :id="`a-typography-text-33-${index}`">{{
              item.time
            }}</a-typography-text>
          </a-flex>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="8" id="a-col-13">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-32">
          <a-typography-link class="flex items-center" id="a-typography-link-38">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-10"> 大宗商品进出口数据 </a-typography-title>
            <a-typography-text class="text-[12px] text-[#979496] pl-1 line-clamp-1" id="a-typography-text-34">(千克)</a-typography-text>
          </a-typography-link>

          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-39">更多>></a-typography-link>
        </a-flex>
        <a-table bordered :data-source="list11" size="small" :pagination="false" id="a-table-38">
          <a-table-column key="1" title="名称" data-index="name" id="a-table-column-38"></a-table-column>
          <a-table-column key="2" title="日期" data-index="time" id="a-table-column-38"></a-table-column>
          <a-table-column key="2" title="进口数量" data-index="num1" id="a-table-column-38"></a-table-column>
          <a-table-column key="2" title="出口数量" data-index="num2" id="a-table-column-38"></a-table-column>
        </a-table>
      </a-col>
      <a-col :span="8" id="a-col-14">
        <a-typography-title :level="5" class="p-2 pl-0 line-clamp-1 !mb-0" id="a-typography-title-11"
          >大宗商品价格数据库</a-typography-title
        >
        <a-flex vertical class="relative border border-[#ddd] border-solid p-2" id="a-flex-33">
          <a-flex vertical align="center" class="absolute top-4 left-4" id="a-flex-34">
            <a-typography-link class="text-[16px] !text-[#000]" id="a-typography-link-40">百川盈孚</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#000]" id="a-typography-link-41">BAIINFO</a-typography-link>
          </a-flex>

          <a-typography-link width="100%" class="h-[180px] bg-[#CCF2F2]" id="a-typography-link-7"></a-typography-link>

          <a-flex align="center" wrap="wrap" id="a-flex-35">
            <a-flex align="center" wrap="wrap" gap="16" class="p-2" id="a-flex-26">
              <a-typography-paragraph
                v-for="(item, index) in list12"
                :key="index"
                class="!mb-0 line-clamp-1"
                :id="`a-typography-paragraph-11-${index}`"
              >
                <a-typography-link
                  v-for="(it, ind) in item"
                  :key="ind"
                  class="pr-5"
                  :class="{ '!text-[#000]': ind === 0, '!text-[#4E4940]': ind !== 0 }"
                  :id="`a-typography-link-42-${ind}`"
                  >{{ it }}</a-typography-link
                >
              </a-typography-paragraph>
            </a-flex>
          </a-flex>
        </a-flex>
      </a-col>
    </a-row>

    <a-divider class="h-1 !mb-0 bg-[#000155]" id="a-divider-2" />

    <a-flex justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-37">
      <a-typography-link class="text-[16px] !text-[#000] font-bold" id="a-typography-link-43"> 行业会议 </a-typography-link>
      <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-42">更多>></a-typography-link>
    </a-flex>

    <a-flex gap="10" class="mt-2" id="a-flex-38">
      <a-typography-paragraph
        v-for="(item, index) in list13"
        :key="index"
        class="!mb-0 relative w-full"
        :id="`a-typography-paragraph-12-${index}`"
      >
        <a-typography-text
          class="z-10 absolute left-0 top-0 text-[12px] text-[#fff] px-2 bg-[#FC5F6F]"
          :id="`a-typography-text-35-${index}`"
        >
          {{ item.tag }}
        </a-typography-text>
        <a-flex justify="center" class="relative min-h-[180px]" :id="`a-flex-39-${index}`">
          <a-typography-link href="#" class="flex flex-col items-center w-full pt-3 bg-[#81CAEB]" :id="`a-typography-link-44-${index}`">
            <a-typography-text :id="`a-typography-text-36-${index}`">
              {{ item.name }}
            </a-typography-text>
            <a-typography-text class="text-[18px] font-bold pt-3" :id="`a-typography-text-37-${index}`">
              {{ item.subName }}
            </a-typography-text>
            <a-typography-text class="pt-3" :id="`a-typography-text-38-${index}`">
              {{ item.title }}
            </a-typography-text>
            <a-typography-text class="text-[14px] pt-3" :id="`a-typography-text-39-${index}`">
              <CodepenCircleOutlined v-if="index === 0" class="text-[#FFE66E] pr-2" :id="`a-icon-9-${index}`" />{{ item.mobile }}
            </a-typography-text>
            <a-typography-text
              class="absolute bottom-0 left-0 p-2 text-[12px] text-[#fff] bg-black opacity-50 w-full"
              :id="`a-typography-text-40-${index}`"
            >
              <CheckCircleOutlined class="text-[#fff] pr-2" :id="`a-icon-10-${index}`" />{{ item.time }}
            </a-typography-text>
          </a-typography-link>
        </a-flex>
        <a-flex vertical justify="space-between" class="h-20" :id="`a-flex-40-${index}`">
          <a-typography-link href="#" :id="`a-typography-link-45-${index}`">
            <a-typography-text class="pt-2 line-clamp-2" :id="`a-typography-text-41-${index}`">
              {{ item.footer }}
            </a-typography-text>
          </a-typography-link>
          <a-typography-link href="#" :id="`a-typography-link-46-${index}`">
            <a-typography-text class="text-[#B5BCBE] py-2 text-[12px]" :id="`a-typography-text-42-${index}`">
              {{ item.address }}
            </a-typography-text>
          </a-typography-link>
        </a-flex>
      </a-typography-paragraph>
    </a-flex>

    <a-divider class="h-1 !mb-0 bg-[#000155]" id="a-divider-3" />

    <a-flex justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-41">
      <a-typography-link class="text-[16px] !text-[#000] font-bold" id="a-typography-link-47"> 百川盈孚专家视频 </a-typography-link>
      <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-48">更多>></a-typography-link>
    </a-flex>

    <a-flex justify="space-between" gap="10" class="mt-2 px-5" id="a-flex-42">
      <a-typography-paragraph class="!mb-0 w-full" v-for="(item, index) in list14" :key="index" :id="`a-typography-paragraph-13-${index}`">
        <a-flex vertical :class="item.style" :id="`a-flex-43-${index}`">
          <a-typography-link class="flex flex-col pl-3 text-[#fff]" :id="`a-typography-link-49-${index}`">
            <a-typography-text class="pt-1 text-[#fff]" :id="`a-typography-text-43-${index}`">{{ item.tag }}</a-typography-text>
            <a-typography-text class="pt-4 text-[#fff] text-[16px]" :id="`a-typography-text-44-${index}`">{{
              item.name
            }}</a-typography-text>
            <a-typography-text class="pt-1 text-[#fff] text-[12px]" :id="`a-typography-text-45-${index}`">{{
              item.subName
            }}</a-typography-text>
            <a-typography-text class="pt-4 text-[#fff] text-[12px]" :id="`a-typography-text-46-${index}`">{{
              item.timeName
            }}</a-typography-text>
            <a-typography-text class="py-1 text-[#fff] text-[12px]" :id="`a-typography-text-47-${index}`">{{
              item.time
            }}</a-typography-text>
          </a-typography-link>

          <a-button
            class="text-[#934A12] m-[auto] ml-3 mt-2 mb-8 !text-[12px] bg-[#FECA95]"
            size="small"
            shape="round"
            :id="`a-button-3-${index}`"
          >
            <template #icon>
              <DownloadOutlined :id="`a-button-11-${index}`" />
              点击查看详情
            </template>
          </a-button>
        </a-flex>

        <a-flex vertical justify="space-between" id="a-flex-44">
          <a-typography-link href="#" :id="`a-typography-link-50-${index}`">
            <a-typography-text class="pt-2 line-clamp-2" id="a-typography-text-48">
              {{ item.footer }}
            </a-typography-text>
          </a-typography-link>
          <a-flex justify="space-between" id="a-flex-45">
            <a-typography-link href="#" :id="`a-typography-link-51-${index}`">
              <a-typography-text class="py-2 text-[12px]" id="a-typography-text-49">
                {{ item.data }}
              </a-typography-text>
            </a-typography-link>
            <a-typography-link href="#" :id="`a-typography-link-52-${index}`">
              <a-typography-text class="text-[#B5BCBE] py-2 text-[12px]" id="a-typography-text-50">
                {{ item.people }}
              </a-typography-text>
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-typography-paragraph>
    </a-flex>
  </div>
</template>

<script setup>
const list8 = [
  '沥青价格',
  '稀土价格',
  '石油焦价格',
  '电解铝价格',
  '湿法磷酸价格',
  '针状焦价格',
  '醋酸价格',
  '苯酐价格',
  '甲醇价格',
  '甲醛价格',
  '水泥价格',
  '车用尿素价格',
];

const list9 = ['市场价格', '出厂价格', '国际价格', '期货价格', '进ロ数据', '岀ロ数据'];

const list10 = [
  {
    name: '知情人士称拜登政府将不执行TikTok禁令',
    time: '01-17 09:06',
  },
  {
    name: '美“星舰”实施第七次试飞',
    time: '01-17 09:06',
  },
  {
    name: '美联储仍处降息周期 金价有望延续偏强行',
    time: '01-17 09:06',
  },
  {
    name: '卡塔尔首相要求以军徽出戈兰高地缓;中区',
    time: '01-17 09:06',
  },
  {
    name: '百川盈孚每日宏观经济导读20250117',
    time: '01-17 09:06',
  },
  {
    name: '习近平主席特别代表韩正将出席美国总统',
    time: '01-17 09:06',
  },
  {
    name: '商务部新闻发言人就诉士耳其电动汽车和.',
    time: '01-17 09:06',
  },
  {
    name: '预告:国新办举行“中国经济高质量发展',
    time: '01-17 09:06',
  },
];

const list11 = [
  {
    name: '醋酸(叫北)',
    time: '2018-04',
    num1: '234',
    num2: '3451',
  },
  {
    name: '醋酸(辽宁)',
    time: '2018-04',
    num1: '23',
    num2: '1242',
  },
  {
    name: '醋酸(河南)',
    time: '2018-04',
    num1: '34',
    num2: '7544',
  },
  {
    name: '醋酸(广东)',
    time: '2018-04',
    num1: '66',
    num2: '1632',
  },
  {
    name: '醋酸(褔建)',
    time: '2018-04',
    num1: '723',
    num2: '34512',
  },
  {
    name: '醋酸(上海)',
    time: '2018-04',
    num1: '341',
    num2: '32343',
  },
  {
    name: '醋酸(江苏)',
    time: '2018-04',
    num1: '44',
    num2: '1234',
  },
  {
    name: '鷗酸( 北',
    time: '2018-04',
    num1: '36',
    num2: '11251',
  },
];

const list12 = [
  ['铝产业链', '氧化锠', '电解锠', '预焙阳极', '石油焦', '波碱', '纯碱'],
  ['大煤化产业链', '煤炭', '动力煤', '炼焦煤', '无烟煤', '嘍吹煤', '电力'],
  ['汽车原料产业链', '中板', '特钢', '铜精矿', '冷轧', '热轧', '干胶'],
  ['建筑工程专栏', '水泥', '平板玻璃', '特种水泥', '水泥熟料', '矿粉'],
];

const list13 = [
  {
    tag: '未开始',
    name: '百川盈孚2025年(第十八届)',
    subName: '化肥产业链研讨会',
    title: '暨客户见面会',
    mobile: '18618305717 15094019049',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年(第十八届)化肥产业链研讨会暨客户见面会',
    address: '重庆',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年',
    subName: '粗苯及纯苯产业链',
    title: '市场研讨会',
    mobile: '18710873936',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年粗苯及纯苯产业链市场研讨会',
    address: '待定',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年',
    subName: '锂市场交流会',
    title: '',
    mobile: '18840619590',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年锂市场交流会',
    address: '重庆',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年(第十五届)',
    subName: '稀土产业大会',
    title: '暨客户见面会',
    mobile: '18618305717 15094019049',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年(第十五届)稀土产业大会',
    address: '广州',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年(第十九届)',
    subName: '磷化工市场研讨会',
    title: '',
    mobile: '18618305717 15094019049 15094019049',
    mobile1: '15094019049',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年(第十九届)磷化工市场研讨会',
    address: '待定',
  },
];

const list14 = [
  {
    style: 'bg-[#6478E9]',
    tag: 'BAIINFO',
    name: '加氢纯苯、乙烯焦油',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '加氢纯苯、乙烯焦油大宗商品热点解读',
    data: '2025-02-17',
    people: '金贵玉,梁晓玉',
  },
  {
    style: 'bg-[#2A3054]',
    tag: 'BAIINFO',
    name: '钛精矿、金属硅',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '钛精矿、金属硅-大宗商品热点解读',
    data: '2025-02-17',
    people: '贾若男,张伊迪',
  },
  {
    style: 'bg-[#BF1C21]',
    tag: 'BAIINFO',
    name: '碳酸二甲酯、电解液',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '碳酸二甲酯、电解液-大宗商品热点解读',
    data: '2025-02-17',
    people: '沈雨丝,刘思懿',
  },
  {
    style: 'bg-[#2A2A60]',
    tag: 'BAIINFO',
    name: '白糖、葡萄糖',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '白糖、葡萄糖-大宗商品热点解读',
    data: '2025-02-17',
    people: '黄雪,周小俪',
  },
  {
    style: 'bg-[#4D4958]',
    tag: 'BAIINFO',
    name: '加氢纯苯、乙烯焦油',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '甘油、棕榈油-大宗商品热点解',
    data: '2025-02-17',
    people: '代国玉,李宇航',
  },
];
</script>
<style></style>
